import React from 'react';
// import PropTypes from 'prop-types';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';

class CouponRuleModal extends BaseComponent {
  state = {
    show: false,
    station: null,
    rule: null,
  }

  show = (station, rule) => {
    this.setState({ show: true, station, rule });
  }

  close = () => {
    this.setState({ show: false });
  }

  render() {
    const { station, rule, show } = this.state;
    if (!show) {
      return null;
    }
    const ruleCells = [];
    const rules = rule.split(/\r\n|[\r\n]/);
    console.log('rules-----', rules, rule);
    rules.forEach((text, index) => {
      if (index !== 0) {
        ruleCells.push(<br key={`${index}-br`} />);
      }
      ruleCells.push(<span key={index}>{text}</span>);
    });
    return (
      <Modal className="coupon-rule-modal">
        <div className="content">
          <div className="title">适用油站：</div>
          <p className="text">{station}</p>
          <div className="title">使用规则：</div>
          <p className="text rule">{ruleCells}</p>
          <div className="action-btn" onClick={this.close}>确定</div>
        </div>
      </Modal>
    );
  }
}

export default CouponRuleModal;

